
<style type="text/css">
    .input-group-addon{padding: 15px 12px}
    .panel .panel-body{padding-top: 0px;}
    table.table thead > tr > th{background: #f9f9f9}
    #datatable_wrapper{padding-top: 0px;border-top: 0px;border:none;}

    table.table-bordered.dataTable{margin-top: 0px!important;border-left:1px solid #ddd;border-right:1px solid #ddd;}
    table.table thead > tr > th{
        border-bottom:none!important;
    }
   
    th, td { white-space: nowrap; }
    div.dataTables_wrapper {width: 100%;margin: 0 auto;}
    table.table thead > tr > th.option_btn{width: 150px!important;}
    .option_btn .btn_flow{margin-right: 0px;}
    /*.show_QRCode:hover img{width: 100px;height: 100px;}*/
    table.table thead > tr > th.avtivedes{width: 400px!important;}
    .table tbody > tr > td.avtivedes{white-space: normal!important;}

    .modal-header{border-bottom: 1px solid #e5e5e5!important;margin-bottom: 15px!important;}
    .profile-widget{box-shadow: none!important;margin-bottom: 0px;}
    .MainSrcinput{position: absolute;width: 100%;height: 100%;display: block; opacity: 0;z-index: 222;}
    .per_val{font-style: normal;color:#6e8cd7;margin-left: 10px;}



    input[type="range" i] {
        color: rgb(196, 196, 196);
    }
    input[type="range" i] {
        -webkit-appearance: slider-horizontal;
        color: rgb(144, 144, 144);
        padding: initial;
        border: initial;
        margin: 2px;
    }
    .MainImg img{width: 30%;}
    .modal-body{padding-bottom: 0px!important;border-bottom:1px dashed #f4f4f4;margin-bottom: 20px;}
    .curstome_userdetial .tit{position: relative;}
    .del-btn{position: absolute;right: -18px;top: -10px;font-size: 20px;display: none;cursor: pointer;}
    .modal-body:hover .del-btn{display: block;color:#6e8cd7}
</style>
        <div class="page-title q-tit-change" style="margin:10px;"> 
            <a href="/drainage/turnplate">大转盘活动管理</a> > 大转盘活动奖品管理
        </div>
        <div class="row" style="margin: 0px;">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="search_input_cont">
                            <div class="search_litile_tit"><span class="tit_diswidth"></span>搜索条件</div>
                            <div class="search_condition overflow">
                                    <div class="input-group col-sm-3 m-b-10">
                                        <span class="input-group-addon">奖品名称</span>
                                        <input type="text" id="example-input1-group1" name="example-input1-group1" class="form-control Name" placeholder="请输入奖品名称">
                                    </div>
                                <div class="col-sm-3"></div>
                                <div class="col-sm-3 search_condbtn">
                                    <button class="btn btn-primary m-r-10" type="button" id="btnSearch">
                                        <i class="fa fa-search"></i> 查  询
                                    </button>
                                    <button class="btn  btn-primary " type="reset" id="btnRefresh">
                                        <i class="fa fa-refresh"></i> 重  置
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row ">
                            <div class="overflow">
                                <div class="search_litile_tit fl" style="margin-left: 10px;"><span class="tit_diswidth"></span>大转盘活动奖品管理列表</div>
                                <div class="fr">
                                    <button id="addToTable" class="btn btn-primary m-t-5 m-r-10 edit-add-btn" data-toggle="modal" data-target="#con-close-modal" data-toggle="tooltip"> <i class="icon ion-android-add"></i> 设置奖品</button>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <table id="datatable" class="table table-striped table-bordered dataTable display" cellspacing="0" >
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>奖品图片</th>
                                            <th>奖品名称</th>
                                            <th>奖品类型</th>
                                            <th>派送方式</th>
                                            <th>中奖概率</th>
                                            <th>创建时间</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End Row -->

<!-- 添加 -->
<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog"> 
        <div class="modal-content" style="overflow-y: scroll;max-height: 900px;"> 
            <div class="modal-header" style="border-bottom: 0px;"> 
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                <h4 class="modal-title" style="text-align: center;">创建活动奖品</h4> 
            </div> 
            <div class="bigCont">
                <div class="modal-body" style="padding-top: 0px;"> 
                    <div class="profile-widget text-center curstome_userdetial">
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="form-group tit"> 
                                    <label for="field-3" class="control-label">奖品名称</label> 
                                    <input type="text" class="form-control PrizeNames"  placeholder="请填奖品名称" > 
                                    <div class="del-btn"><span class="fa fa-trash-o"></span></div>
                                </div> 
                            </div>
                        </div> 
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="form-group"> 
                                    <label for="field-3" class="control-label">奖品图片</label> 
                                    <div>
                                        <div class="form-group input-group" style="width: 100%;">
                                            <!-- <input type="file" class="MainSrcinput " name="file" id="MainSrc" > -->
                                            <input type="text" id="example-input2-group1" name="example-input2-group1" class="form-control fileupload" placeholder="上传奖品图片" readonly  >
                                            <span class="input-group-addon" style="height: 34px;line-height: 34px;text-align: center;padding: 0px;width: 34px;"><i class="fa ion-image"></i></span>
                                        </div>
                                        <div class="MainImg MainSrcImg"><img src="/modules/img/default.jpg"></div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="form-group"> 
                                    <label for="field-3" class="control-label">奖品类型</label> 
                                    <select class="form-control PrizeType" >
                                        <option value="0">谢谢惠顾</option>
                                        <!-- <option value="100">红包</option> -->
                                        <!-- <option value="200">思和会颜值</option> -->
                                        <!-- <option value="300">思和会会员</option> -->
                                        <option value="400">实物</option>
                                    </select>
                                </div> 
                            </div>
                        </div>
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="form-group"> 
                                    <label for="field-3" class="control-label">派送方式</label> 
                                    <select class="form-control DeliveryType" >
                                        <!-- <option value="100">系统自动处理（虚拟产品）</option> -->
                                        <option value="200">线下门店自提（实物产品）</option>
                                        <option value="300">线上物流发货（实物产品）</option>
                                    </select>
                                </div> 
                            </div>
                        </div>
                        <div class="row"> 
                            <div class="col-md-12"> 
                                <div class="form-group"> 
                                    <label for="field-3" class="control-label">设置中奖概率<i class="per_val">1%</i></label> 
                                    <input type="range" value="1" max="100" min="1" step="1"  class="form-control trackBar"> 
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div> 
            <div  style="text-align: center;">
                <button class="btn btn-icon btn-success m-b-5 addMoregift" ><i class="ion-plus" style="font-size: 16px;"></i> 设置多个奖品</button>
            </div>
            <div class="modal-footer" style="border-top: 0px;padding-bottom: 15px;margin-right: 20px;"> 
                <span class="pass-msg error" style="display: none;">请填写数字</span>
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button> 
                <button type="button" class="btn btn-info create_userinfo">保存</button> 
            </div> 
        </div> 
    </div>
</div>
<input type="file" id="file" name="file" style="display: none;">

<script src="/modules/assets/modal-effect/js/classie.js"></script>
<script src="/modules/assets/modal-effect/js/modalEffects.js"></script>

<link rel="stylesheet" type="text/css" href="/modules/assets/timepicker/bootstrap-timepicker.min.css">
<script src="/modules/assets/timepicker/bootstrap-timepicker.min.js"></script>
<script src="/modules/assets/timepicker/bootstrap-timepicker.min-zn.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        //初始化日期控件
        $("#StartTime").datetimepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd hh:ii",
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });
        //初始化日期控件
        $("#EndTime").datetimepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd hh:ii",
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });
        
    });
  
    $(document).on('change','.bigCont .trackBar',function(){
        var per = $(this).parents('.modal-body');
        per.find('.per_val').html($(this).val()+'%');
    })

    seajs.use('drainage/turnplategiftlist');
</script>
